<template>
    <div class="box">
        <!-- 
          Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可(prop必须和双向数据绑定的值一致)
          model	表单数据对象	object
          rules	表单验证规则    object
       -->
        <el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="100px" class="form">
            <el-form-item prop="username" label="用户名">
                <el-input v-model="loginForm.username" clearable></el-input>
            </el-form-item>
            <el-form-item prop="password" label="密码">
                <el-input v-model="loginForm.password" clearable show-password></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="login">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
// 引入封装好的接口
import { userLogin } from '../request/api'
export default {
    data() {
        return {
            loginForm: {
                //登录表单
                username: "",
                password: "",
            },
            //验证规则
            rules: {
                username: [
                    // required必须的 必传项
                    { required: true, message: "请输入用户名", trigger: "blur" },
                    { min: 2, max: 8, message: "长度在 2 到 8 个字符", trigger: "blur" },
                ],
                password: [
                    // required必须的 必传项
                    { required: true, message: "请输入密码", trigger: "blur" },
                    { min: 6, max: 16, message: "长度在 6 到 16 个字符", trigger: "blur" },
                ],
            }
        };
    },
    methods: {
        //封装一个登录事件
        login() {
            //获取表单节点并验证
            this.$refs.loginForm.validate(flag => {
                if (flag) {
                    console.log(this.loginForm, '表单对象');
                    //调用登录接口
                    userLogin(this.loginForm)
                        .then(res => {
                            console.log(res, '登录');
                            if (res.code == 200) {
                                this.$message.success(res.msg)
                                // 把信息存储在本地
                                // sessionStorage.setItem('uesrinfo',JSON.stringify(res.list))
                                // 把结果存入vuex
                                this.$store.dispatch('changeUserAction', res.list)
                                //跳转到index页面
                                this.$router.push('/index')
                            } else {
                                this.$message.error(res.msg)
                            }
                        })

                } else {
                    console.log('验证失败');
                }
            })
        }
    },
};
</script>

<style  lang="less" scoped>
.box {
    width: 100vw;
    height: 100vh;
    background-color: aqua;

    .form {
        width: 400px;
        height: 200px;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        margin: auto;
        text-align: center;
    }
}
</style>
